<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="24">
                 <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span @click="offineClick()"><i class="el-icon-menu"></i> 系统基础信息</span>
                    </div>
                    <div class="setMess_flex">
                        <div class="setMess_wan">
                            <div class="setMess_title">
                                <i class="el-icon-s-order"></i>
                                Wan口ip</div>
                            <div class="setMess_wan_flex">
                                <div class="setMess_wan_title">ip：</div>
                                <div>{{ this.messageData.ip0 }}</div>
                            </div>
                            <div class="setMess_wan_flex">
                                <div class="setMess_wan_title">子网掩码：</div>
                                <div>{{ this.messageData.mask0 }}</div>
                            </div>
                            <div class="setMess_wan_flex">
                                <div class="setMess_wan_title">网关：</div>
                                <div>{{ this.messageData.gw0 }}</div>
                            </div>
                        </div>
                        <div class="setMess_wan">
                            <div class="setMess_title">
                                <i class="el-icon-s-order"></i>
                                Lan口ip</div>
                            <div class="setMess_wan_flex">
                                <div class="setMess_wan_title">ip：</div>
                                <div>{{ this.messageData.ip1 }}</div>
                            </div>
                            <div class="setMess_wan_flex">
                                <div class="setMess_wan_title">子网掩码：</div>
                                <div>{{ this.messageData.mask1 }}</div>
                            </div>
                            <div class="setMess_wan_flex">
                                <div class="setMess_wan_title">网关：</div>
                                <div>{{ this.messageData.gw1 }}</div>
                            </div>
                        </div>
                        <!-- <div class="setMess_wan">
                            <div class="setMess_title">
                                <i class="el-icon-s-order"></i>
                                WIFI信息</div>
                            <div class="setMess_wan_flex">
                                <div class="setMess_wan_title">WIFI名称：</div>
                                <div>{{ this.messageData.wifi }}</div>
                            </div>
                            <div class="setMess_wan_flex">
                                <div class="setMess_wan_title">WIFI密码：</div>
                                <div>{{ this.messageData.wifipwd }}</div>
                            </div>
                        </div> -->
                        <div class="setMess_wan">
                            <div class="setMess_title">
                                <i class="el-icon-s-order"></i>
                                版本信息</div>
                            <div class="setMess_wan_flex">
                                <div class="setMess_wan_title setMess_wan_title2">前端版本：</div>
                                <div>V1.01</div>
                            </div>
                            <div class="setMess_wan_flex">
                                <div class="setMess_wan_title setMess_wan_title2">服务器版本：</div>
                                <div>{{ this.version }}</div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog 
            title="设置" 
            :visible.sync="centerDialogVisible"
            :append-to-body = 'true'
            :close-on-click-modal="false"
          width="35%"

        >
        <div class="offine_devset">
            <div class="offine_devset_top">
                <span class="offine_title">是否显示浏览器：</span>
                <span :class="this.hideValue == true ? 'offine_text':'offine_value'">隐藏</span>
                <el-switch
                    v-model="hideValue"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
                <span :class="this.hideValue == true ? 'offine_value':'offine_text'">显示</span>
                
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOffline()">确 定</el-button>
            </span>
        </div>
        </el-dialog>
    </div>
</template>

<script>
//这里要俺需要引入，我不是一个对象
  import {isvalidPhone} from '../../assets/js/validate'
  
export default {
    data () {
          /*ip正则验证*/
        var validcodeip = (rule, value, callback) => {
            const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
            if (reg.test(value)) {
                callback();
            } else {
                return callback(new Error('输入格式不合法！'));
            }
        };
        //定义一个全局的变量，谁用谁知道
        var validPhone=(rule, value,callback)=>{
            if (!value){
                this.phoneR = 0
                callback(new Error('请输入电话号码'))
            }else  if (!isvalidPhone(value)){
                this.phoneR = 0
                callback(new Error('请输入正确的11位手机号码'))
            }else {
                
                this.phoneR = 1
                callback()
            }
        }
        return{
            messageData:{},
            centerDialogVisible: false,
            offineC:0,
            hideValue:true,
            layout0:{},
            layout1:{},
            version:'',
            systemName:'',
            msgip:'',
            wanForm: {
                ip:'',
                subnet:'',
                gateway:''

            },
            lanForm: {
                lanip:'',
                lansubnet:'',
                langateway:''

            },
            wifiForm: {
                name:'',
                pwd:''
            },
            systemName:'',
            
            registe:'',
            test4gForm: {
                test4g:'',
            },
            phoneR:3,
            rules: {
                ip: [{validator:validcodeip,trigger:'blur'}],
                subnet: [{validator:validcodeip,trigger:'blur'}],
                gateway: [{validator:validcodeip,trigger:'blur'}],
                lanip: [{validator:validcodeip,trigger:'blur'}],
                lansubnet: [{validator:validcodeip,trigger:'blur'}],
                langateway: [{validator:validcodeip,trigger:'blur'}]
            },
            rules2: {
                name: [
                    { required: true, message: '请输入wifi名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                 pwd: [
                    { required: true, message: '请输入wifi密码', trigger: 'blur' },
                    { min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' }
                ]
            },
            rules3: {
                test4g: [
                    { required: true, trigger: 'blur', validator: validPhone }//这里需要用到全局变量
                ]
            },
            timeSysData:'',//接口方法的定时器
            stime:0,
            dataip:'',
            url:''
        }
    },
    created() {
        this.getSystem()
        this.url = window.location.hostname
        this.dataip = 'http://'+this.url+':9977/api'
    },
    methods: {
        // 弹出离线改变状态弹框  8秒之内点击10次
        offineClick() {
            this.offineC++;
            if (this.offineC > 9) {
                //打开ip弹框
                this.centerDialogVisible = true;
                this.offineC = 0;
                this.stime = 0
            }else if(this.offineC <= 9){
                if(this.stime == 0){
                    this.stime = 1
                    setTimeout(() => {
                        this.offineC = 0;
                        this.stime = 0
                    }, 8000);
                }
                
            }
        },
        // 保存隐藏状态改变
        saveOffline(){
            var params = {
                "hide":this.hideValue,
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            console.log(this.$baseUrl2)
            this.$http.post(this.dataip, params).then((res) => {
                   if(res.data.result !== 'ok'){
                        this.$message({
                            message: '保存失败',
                            type: 'warning',
                            duration: 1500
                        });
                    }else{
                        this.$notify({
                            title: '保存成功',
                            type: 'success',
                            duration: 1500
                        });
                    }
            });
        },
        //系统信息获取
        getSystem () {
            var ss = 0
             var params = {
                "getlayout":"layout0",
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.result == 'ok'){
                    if(res.data.layout0 == undefined){
                        ss++
                    }else{
                        var data = res.data.layout0
                        this.messageData = data
                        this.layout0 = data
                        this.systemName = data.name;
                        this.wanForm.ip =  data.ip0;
                        this.wanForm.subnet =  data.mask0;
                        this.wanForm.gateway =  data.gw0;
                        this.lanForm.lanip =  data.ip1;
                        this.lanForm.lansubnet =  data.mask1;
                        this.lanForm.langateway =  data.gw1;
                        this.wifiForm.name = data.wifi; 
                        this.wifiForm.pwd = data.wifipwd; 
                        this.msgip = data.gsmlan;
                        this.version = data.version; 
                    }
                }else if(res.data.result =='No access rights.'){
                }
                
            });
            if(ss > 0){ //有失败接口
                // 停止循环接口
                clearInterval(this.timeSysData);
                this.timeSysData = null;
                this.$nextTick(() => {
                    this.timeSysData = setInterval(() => {
                        this.getSystem()
                    }, 3000); 
                })
            }else{
                // 停止循环接口
                clearInterval(this.timeSysData);
                this.timeSysData = null;
            }
        },
    },
    beforeDestroy() {
        // 停止循环接口
        clearInterval(this.timeSysData);
        this.timeSysData = null;
    }
}
</script>

<style scoped>
 .el-card {
    background: none;
    color: #fff;
    border: 1px solid rgba(89, 129, 165, 0.4);
    }
    /deep/ .el-card__header {
    background: rgba(89, 129, 165, 0.2);

    border-bottom: none;
    }
    .box-card {
    /* overflow: hidden; */
    }
    .card_padding_chart{
    padding: 7px 0;
    }
    /deep/ .el-input__inner{
        background: rgba(255, 255, 255, 0);
        border: 1px solid rgba(255, 255, 255, 0.3);
        width: 100%;
        color: #fff;
    }
    /deep/ .el-form-item__label{
        color: #fff;
    }
    .zhushi{
        margin-top: -10px;
        margin-bottom: 10px;
        color: #e6a23c;
        font-size: 12px;
        text-indent: 80px;
    }
    /deep/.el-card {
        height: 900px;
    }
    /deep/ .el-input-group__prepend{
        background: rgba(89, 129, 165, 0.4);
        color:#fff;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    /deep/ .el-input-group__append{
        background:#409EFF;
        color:#fff;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    /deep/ .el-card__body{
        padding: 35px 60px 0px 60px !important;
    }
    /deep/ .el-input-group{
        width: 80%;
    }
    /deep/ .el-button{
        background: rgba(89, 129, 165, 0.8);
        border: none;
    }
    
/deep/ .el-dialog__header .el-dialog__title {
  color: #fff !important;
}

/deep/ .el-dialog {
  background: rgba(79, 112, 151, 0.4) !important;
}
/deep/ .el-dialog__header {
  background: rgba(0, 0, 0, 0.2);
  color: #fff !important;
}
/deep/ .el-dialog__header .el-dialog__title {
  color: #fff !important;
}
/deep/ .el-form-item__label {
  color: #fff !important;
}
/deep/ .el-dialog__body{
        padding: 30px 135px 30px 40px;
}
    .offine_devset{
        /* text-align: center; */
        margin-left: 50px;
    }
    .offine_devset_top{
        margin-bottom: 40px;
        margin-top: 20px;
    }
    .offine_title{
        font-size: 18px;
        color: #fff;
    }
    .offine_text{
        font-size: 18px;
        color: #c4c4c4;
    }
    .offine_value{
        font-size: 18px;
        color: #e6a23c;
    }
    /deep/ .el-radio__label{
        font-size: 16px !important;
        color: #fff;
    }
/* 系统信息设置 */
.setMess_flex{
    display: flex;
    flex-wrap: wrap;
}
.setMess_wan{
    margin-right: 20px;
    background: #d0e9ff40 !important;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    width: 300px;
    height: 150px;
}
.setMess_wan_flex{
    display: flex;
    width: 250px;
    margin: 0 auto;
    font-size: 14px;
    letter-spacing: 1px;
    margin-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #ccc;
}
.setMess_title{
    font-size: 17px;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    border-bottom: 1px solid #ccc;
    background:#283e5282;
}
.setMess_wan_title{
    width: 80px;
    text-align: right;
    margin-right: 10px;
}
.setMess_wan_title2{
    width: 100px;
}
</style>